<template>
	<view class="container">
		<tui-navigation-bar @init="initNavigation" :isOpacity="false" :maxOpacity="1" :scrollTop="scrollTop"
			backgroundColor="#fff" color="#333" :title="pageTitle">
			<view class="tui-header" :style="{ marginTop: navBarTop + 'px' }">
				<view class="get-back dy-iconfont icon-qiehuanqizuo" @click="goBack"></view>
			</view>
		</tui-navigation-bar>
		<view class="main">
			<view class="section section-serve version-number">
				<view class="section-serve-item">
					<view class="name" @touchend="maskTouchend">版本号 {{version_number}} <text
							v-if="obj">{{obj.top}}</text> </view>
					<view class="arrow dy-iconfont icon-qiehuanqiyou"></view>
				</view>
			</view>
			<view class="section section-serve">
				<template v-for="(item,index) in menuList">
					<view class="section-serve-item" v-if="!item.needLogin" :key="item.id"
						@tap.stop.prevent="goMenuPage(item)" :class="{'noneBorder': index==menuList.length - 1 }">
						<view class="name">{{item.name}}</view>
						<view class="arrow dy-iconfont icon-qiehuanqiyou"></view>
					</view>
				</template>
			</view>
			<button v-if="isLogin" class="btn-primary exit-submit" @tap.stop.prevent="onExit">退出登录</button>
		</view>
		<uv-popup ref="submitPopup" bgColor="none">
			<reminder title='确认注销' value="确认注销后，此账号所有信息均将被删除，不可恢复。"
				image="https://pengtou-1322587508.cos.ap-shanghai.myqcloud.com/static/images/order-header-2.png">
				<view class="signPop">
					<button class="btn-primary btn-custom" @tap.stop.prevent="closePop">暂不注销</button>
					<button class="btn-primary btn-default" @tap.stop.prevent="onWriteOff">确认注销</button>
				</view>
			</reminder>
		</uv-popup>
		<survey-pop></survey-pop>
		<uv-toast ref="toast"></uv-toast>
	</view>
</template>

<script>
	import mp from "@/mixins/mp.js";
	import throttle from '@/uni_modules/uv-ui-tools/libs/function/throttle.js';
	const app = getApp();
	export default {
		mixins: [mp],
		options: {
			styleIsolation: 'shared'
		}, //解决/deep/不生效**
		components: {},
		data() {
			return {
				navBarOpacity: 0, //标题图标距离顶部距离
				scrollTop: 0.5, //页面滚动高度
				navBarTop: 0, // 导航栏content顶部m-top
				skeletonShow: true, //加载
				pageTitle: '我的设置', //标题
				isLogin: app.globalData.isLogin,
				menuList: [{
						id: "account",
						name: "注销账号",
						icon: "account",
						needLogin: !app.globalData.isLogin,
					}, {
						id: "cache",
						name: "清除缓存",
						icon: "cache",
						needLogin: false,
					}, {
						id: "service",
						name: "用户协议",
						icon: "service",
						url: 'https://pengtou-1322587508.cos.ap-shanghai.myqcloud.com/static/pdf/register.pdf',
						needLogin: false,
					},
					{
						id: "policy",
						name: "隐私政策",
						icon: "policy",
						url: 'https://pengtou-1322587508.cos.ap-shanghai.myqcloud.com/static/pdf/privacy.pdf',
						needLogin: false,
					},
					// {
					// 	id: "topUP",
					// 	name: "服务费充值",
					// 	icon: "topUP",
					// 	url: 'page_sharing/check/topUp',
					// 	needLogin: false,
					// },
					// {
					// 	id: "proof",
					// 	name: "资质证明",
					// 	icon: "proof",
					// 	url: '',
					// 	needLogin: false,
					// },
				],
				version_number: '1.0.0',
				touchNum: 0,
				obj: {}
			};
		},
		/**
		 * 计算属性
		 */
		computed: {},
		onLoad(options) {
			//微信小程序获取版本号
			const accountInfo = uni.getAccountInfoSync();
			this.version_number = accountInfo.miniProgram.version; // 小程序 版本号
		},
		onShow: function() {},
		/**
		 * 下拉
		 */
		onPullDownRefresh: function() {},
		/**
		 * 触底
		 */
		onReachBottom() {},
		/**
		 * 滚动
		 */
		onPageScroll(res) {
			this.scrollTop = res.scrollTop;
		},
		/**
		 * 计算属性
		 */
		computed: {},
		methods: {
			goLogin() {
				app.doLogin()
			},
			initNavigation(e) {
				this.navBarOpacity = e.opacity;
				this.navBarTop = e.top;
			},
			// 返回上一页
			goBack: function() {
				app.beNavigateBack();
			},
			maskTouchend(e) {
				this.touchNum++
				setTimeout(() => {
					if (this.touchNum == 2) {
						// this.obj = wx.getMenuButtonBoundingClientRect();
						uni.login({
							provider: 'weixin',
							success(result) {
								console.log(result.code);
							}
						})
					}
					if (this.touchNum == 3) {
						app._post_form(
							"/client/im/create-user-sig", null,
							(result) => {
								console.log(result);
							}, null, () => {}
						);
					}
					this.touchNum = 0
				}, 500)
			},
			goMenuPage(item) {
				if (!item) {
					return
				}
				let that = this;
				if (item.id == 'account') {
					this.$refs.submitPopup.open();
					return
				}
				if (item.id == 'topUP') {
					app.navigationTo(item.url)
					return
				}
				that.$refs.toast.show({
					type: 'loading',
				})
				if (item.id == 'cache') {
					setTimeout(() => {
						uni.removeStorageSync('guide');
						uni.removeStorageSync('step1');
						uni.removeStorageSync('step2');
						uni.removeStorageSync('step3');
						uni.removeStorageSync('questionnaire');
						that.$refs.toast.hide()
						setTimeout(() => {
							that.$refs.toast.show({
								type: 'success',
								message: "清除成功",
							})
						}, 400)
						setTimeout(() => {
							that.$refs.toast.hide()
						}, 1000)
					}, 1000)
					return
				}
				wx.downloadFile({
					url: item.url, //文件地址
					success(res) {
						wx.saveFile({ //重点 wx.saveFile一定要有   避免文件存储找不到  然后打开失败
							tempFilePath: res.tempFilePath,
							filePath: wx.env.USER_DATA_PATH + '/' + item.name + '.pdf',
							success(res) {
								wx.openDocument({
									filePath: res.savedFilePath,
									fileType: "pdf",
									showMenu: true,
									success: function(res) {
										that.$refs.toast.hide()
									},
									fail: function(res) {
										that.$refs.toast.hide()
									},
								})
							}
						})
					},
				})
			},
			//注销登录
			outLoginBtn() {
				// let promise = uni.$TUIKit.logout();
				// promise.then(res => {
				// 	this.$store.commit('reset')
				// }).catch(err => {
				// 	console.log('退出失败')
				// });
			},
			closePop() {
				this.$refs.submitPopup.close();
			},

			onWriteOff() {
				let that = this;
				that.$refs.toast.show({
					type: 'loading',
				})
				throttle(app._post_form("/client/my/logOut", null,
					(res) => {
						if (res.code == 0 || res.code == 200) {
							uni.removeStorageSync('token');
							uni.removeStorageSync('user_info');
							uni.removeStorageSync('coupon_detail');
							app.globalData.UserInfo = {}
							app.globalData.isLogin = false
							app.globalData.bind_Phone = false
							app.globalData.token = ''
							// that.outLoginBtn()
							that.$refs.toast.show({
								type: 'success',
								message: "账号已注销"
							})
							setTimeout(() => {
								that.$refs.toast.hide()
								uni.reLaunch({
									url: '/pages/index/index'
								});
							}, 1000)
						}
					}, false, () => {
						that.$refs.toast.hide()
					}, () => {
						that.$refs.toast.hide()
					}
				), 1000, true)
			},
			onExit() {
				let that = this;
				that.$refs.toast.show({
					type: 'loading',
				})
				app._post_form("/client/logout", 'wechat_client',
					(res) => {
						if (res.code == 0 || res.code == 200) {
							uni.removeStorageSync('token');
							uni.removeStorageSync('user_info');
							uni.removeStorageSync('coupon_detail');
							app.globalData.UserInfo = {}
							app.globalData.isLogin = false
							app.globalData.bind_Phone = false
							app.globalData.token = ''
							// this.outLoginBtn()
							uni.reLaunch({
								url: '/pages/index/index'
							});
						}
					}, false, () => {
						that.$refs.toast.hide()
					}
				)
			}
		},
	};
</script>
<style lang="scss" scoped>
	/deep/.reminder {
		padding-top: 140rpx !important;

		.reminder-image {
			width: 270rpx !important;
		}
	}

	.signPop {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;

		.btn-primary {
			text-align: center;
			font-size: 26rpx;
			flex-shrink: 0;
			width: 240rpx;
			height: 80rpx;
			line-height: 80rpx;
		}

		.btn-custom {
			border: 2rpx solid #7B867F;
			color: #999B9B;
			background: #FFFFFF;
		}
	}

	.container {
		min-height: 100vh;
		background: #F6F8F7;

		.tui-header {
			width: 100%;
			position: fixed;
			top: 0;
			padding: 0 42rpx;
			display: flex;
			align-items: center;
			height: 32px;
			transform: translateZ(0);
			z-index: 99999;
			box-sizing: border-box;

			.get-back {
				flex-shrink: 0;
				width: 36rpx;
				height: 36rpx;
				color: #000;
				font-size: 36rpx;
				padding: 2rpx 40rpx 2rpx 2rpx;
			}
		}

		.main {
			box-sizing: border-box;
			padding: 170rpx 0 0;

			.section {
				box-sizing: border-box;
				background: #FFFFFF;
			}



			.section-serve {
				padding: 0 36rpx;

				.title {
					font-size: 28rpx;
					color: #282D2D;
					line-height: 37rpx;
				}

				.section-serve-item {
					display: flex;
					align-items: center;
					justify-content: center;
					padding: 36rpx 0;
					border-bottom: 2rpx solid #E3E9E5;

					&.noneBorder {
						border-bottom: none;
					}

					.icon {
						height: 35rpx;
						margin-right: 16rpx;
					}

					.name {
						flex: 1;
						font-size: 30rpx;
						font-weight: 400;
						color: #282D2D;
						line-height: 40rpx;
					}

					.arrow {
						color: #BBBCBB;
						font-size: 24rpx
					}
				}
			}

			.version-number {
				margin-bottom: 20rpx;

				.section-serve-item {
					border-bottom: none;
				}
			}

			.exit-submit {
				position: absolute;
				width: calc(100% - 77rpx * 2);
				bottom: 64rpx;
				left: 50%;
				transform: translateX(-50%);
			}
		}
	}
</style>